<template>
  <div class="menu-box">
    <div class="title">
      <i class="el-icon-bicycle"></i>
      <span>移动源污染排放分析系统</span>
    </div>
    <el-menu
      :default-active="$route.path.replace('/', '')"
      class="menu-box-content"
      background-color="#545c64"
      text-color="#fff"
      :router="true"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import { Menu, MenuItem, Submenu } from 'element-ui'

  export default {
    name: 'MenuBox',
    components: {
      elMenu: Menu,
      elMenuItem: MenuItem,
      elSubmenu: Submenu,
    },
    methods: {
    },
    mounted() {
    },
  }
</script>

<style lang="scss" scoped>
.menu-box{
  height: 100%;
  display: flex;
  background: #545c64;
  flex-direction: column;
  .title{
    height: 100px;
    line-height: 100px;
    color: #fff;
    font-size: 22px;
    text-align: center;
    i{
      color: skyblue;
      margin-right: 8px;
    }
  }
  .menu-box-content{
    flex: 1;
    border-right: 0;
  }
}
</style>